import React, { useState, FC, useEffect } from 'react';
import { StackedArea } from '@ant-design/charts';
import useHoxModel from '../../useHoxModel';
import { Spin, Space } from 'antd';
import styles from './index.less';
import classnames from 'classnames';
import EmptyCenter from '@/components/EmptyCenter';
import moment from 'moment';

const DemoStackedArea: React.FC = () => {
  const {
    getOpenRecordChart,
    openRecordChartLoading,
    openRecordChart = [],
  } = useHoxModel((model) => [model.openRecordChart, model.openRecordChartLoading]);
  useEffect(() => {
    getOpenRecordChart({ type: 'week' });
  }, []);
  const [date, setDate] = useState<string>('week');
  const config = {
    title: {
      visible: false,
      text: '访客统计',
      style: {
        fontSize: 14,
        fill: '#545b6d',
        fontWeight: 500,
      },
    },
    data: openRecordChart,
    tooltip: {
      visible: true,
      formatter: (xField: string, yField: number, seriesField: string) => {
        return { name: '访客数', value: yField };
      },
    },
    xField: 'time',
    yField: 'count',
    padding: [80, 35, 50, 60],
    stackField: 'count',
    smooth: true,
    xAxis: {
      line: {
        visible: true,
        style: {
          stroke: '#fff',
        },
      },
      label: {
        formatter: (value: string) => {
          let result = '';
          switch (date) {
            case 'week':
              let week = value + ' 00:00:00';
              result = moment(week).format('MM-DD');
              break;
            case 'month':
              let month = value + ' 00:00:00';
              result = moment(month).format('MM-DD');
              break;
            case 'day':
              result = moment(value).format('HH:mm');
              break;
          }

          return result;
        },
      },
    },
    yAxis: {
      grid: {
        visible: true,
        line: {
          style: {
            stroke: '#eee',
            lineDash: [4, 4],
          },
        },
      },
    },
    legend: {
      visible: false,
    },
    style: {
      height: '100%',
    },
  };
  return (
    <div className={styles['line-wrap']}>
      <div className={styles['title']}>访客统计</div>
      <Spin spinning={openRecordChartLoading}>
        {openRecordChart && openRecordChart[0] ? <StackedArea {...config} /> : <EmptyCenter />}
      </Spin>
      <DateSwitch getRunAlarmChart={getOpenRecordChart} date={date} setDate={setDate} />
    </div>
  );
};
interface DateSwitchProps {
  getRunAlarmChart: (
    params?:
      | {
          type: string;
        }
      | undefined,
  ) => Promise<any>;
  date: string;
  setDate: React.Dispatch<React.SetStateAction<string>>;
}
const DateSwitch: FC<DateSwitchProps> = ({ getRunAlarmChart, date, setDate }) => {
  const dates = [
    { name: '当天', value: 'day' },
    { name: '本周', value: 'week' },
    { name: '本月', value: 'month' },
  ];
  return (
    <div className={styles['date-wrap']}>
      <Space size={30}>
        {dates.map((item: { name: string; value: string }, index: number) => {
          return (
            <span
              key={index.toString(36) + index}
              className={classnames(date === item.value ? styles['active'] : null, styles['date'])}
              onClick={() => {
                setDate(item.value);
                getRunAlarmChart({ type: item.value });
              }}
            >
              {item.name}
            </span>
          );
        })}
      </Space>
    </div>
  );
};

export default DemoStackedArea;
